<template>
  <view class="merchant">
    <view class="header">
      <v-icon
        size="36rpx"
        src="@/static/icons/cart-merchant.svg"
      />
      <view class="merchant-name">
        {{ merchant.merchant_name }}
      </view>
    </view>
    <template
      v-for="(product, index) in merchant.detail_list"
      :key="product.sku_id"
    >
      <view
        v-if="index !== 0"
        class="divider"
      />
      <order-confirm-product :product="product" />
    </template>
    <view class="merchant-info-item">
      <view class="label">
        商品总价
      </view>
      <view class="sub-label">
        {{ `共${productCount}件商品` }}
      </view>
      <view class="content">
        {{ `¥${totalPrice.toFixed(2)}` }}
      </view>
    </view>
    <view class="merchant-info-item">
      <view class="label">
        运费
      </view>
      <view>
        {{ shippingText }}
      </view>
    </view>
    <view class="merchant-info-item">
      <view class="label">
        订单备注
      </view>
      <view
        class="content"
        @click="$emit('show-remark')"
      >
        <view
          class="remark"
          :class="{ placeholder: !remark }"
        >
          {{ remark || '无备注' }}
        </view>
        <wd-icon
          name="arrow-right"
          size="24rpx"
          color="#999999"
        />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import OrderConfirmProduct from './order-confirm-product.vue';

const props = defineProps<{
  merchant: OrderMerchantVO;
  shippingFee: number | undefined;
  remark: string;
}>();

defineEmits<{
  'show-remark':() => void;
}>();

const shippingFee = toRef(props, 'shippingFee');
const shippingText = computed(() => {
  if (shippingFee.value === undefined) return '请先选择地址';
  if (shippingFee.value === -1) return '该地区无法配送';
  if (shippingFee.value === 0) return '包邮';
  return `¥${shippingFee.value.toFixed(2)}`;
});

const merchant = toRef(props, 'merchant');

const productCount = computed(() =>
  merchant.value.detail_list.reduce((acc, cur) => acc + cur.quantity, 0)
);

const totalPrice = computed(() =>
  merchant.value.detail_list.reduce(
    (acc, cur) => acc + cur.sell_price * cur.quantity,
    0
  )
);
</script>

<style lang="scss" scoped>
.merchant {
  padding: 28rpx 24rpx;
  margin: 0 24rpx 24rpx;
  background-color: white;
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  .header {
    height: 40rpx;
    display: flex;
    align-items: center;
    gap: 16rpx;
    .merchant-name {
      font-weight: bold;
      flex: 1;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
    }
  }
  .divider {
    height: 1px;
    background-color: #eeeeee;
  }

  .merchant-info-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24rpx;
    .label {
      flex-shrink: 0;
    }
    .sub-label {
      color: #999999;
      font-weight: 300;
      flex: 1;
      min-width: 0;
    }
    .content {
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 12rpx;
      .remark {
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        text-align: right;
      }
    }
  }
}
</style>
